<template>
  <div>
    <Header></Header>
    <Nav></Nav>
    <div class="box" v-for="(gd, index) in garden_detail">
      <div class="content">
        <p class="garden">{{ gd.garden }}</p>
        <p>招聘介绍：{{ gd.garden_troduction }}</p>
        <p>招聘岗位：{{ gd.job }}</p>
        <p>岗位薪资：{{ gd.salsry }}</p>
        <span>岗位{{ gd.job_troduction }}</span>&nbsp;&nbsp;&nbsp;&nbsp;
        <span>
          <a @click="more(index)">立即申请</a></span>
      </div>
    </div>
    <Dialog :dialog="dialog" :ad="tojob" :tg="togarden"></Dialog>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '../components/header.vue'
import Nav from '../components/nav.vue'
import Footer from '../components/footer.vue'
import eventBus from '../views/eventBus'
import router from '@/router'
import Dialog from '../components/dialog.vue'

export default {
  name: 'personal',
  components: {
    Header,
    Nav,
    Footer,
    Dialog,
    router
  },
  data() {
    return {
      dialog: {
        show: false
      },
      tojob: [],
      togarden: [],
      garden_detail: [],
    };
  },
  created() {

  },
  mounted() {
    eventBus.$on('garden_detail', item => {
      this.garden_detail = item
      // console.log(this.garden_detail)
    })
  },
  methods: {
    more(index) {
      this.dialog.show = true
      this.tojob = this.garden_detail[index].job
      this.togarden = this.garden_detail[index].garden
    }
  }
}
</script>

<style scoped>
a {
  text-decoration: none;
  color: red;
}

.content {
  margin-left: 314px;
  margin-right: 351px;
  border: 1px solid white;
  background-color: gray;
}

.garden {
  font-size: 20px;
  text-align: center;
}
</style>
